<div ng-controller="pageCtrl" ng-init="mainStatus.navigation='layout'">
    <div class="top-nav-wrap">
        <div class="back backBtn"><i class="iconfont icon-back"></i></div>
        <div class="title2">布局</div>
        <div class="right">
            <div class="nav">
                <a class="li"><i class="iconfont icon-plus"></i></a>
                <a class="li"><i class="iconfont icon-search"></i></a>
                <a class="li"><i class="iconfont icon-bell"></i><i class="tip" ng-if="mainStatus.msgBubble">{{mainStatus.msgBubble}}</i></a>
            </div>
        </div>
    </div>
    <div class="page-main">
        <div class="mgb-l"><span class="text-l">基本布局</span></div>
        <div class="mg-l">
            <div class="col-group col-group-exp mg">
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
                <div class="col-1">.col-1</div>
            </div>
            <div class="col-group col-group-exp mg">
                <div class="col-8">.col-8</div>
                <div class="col-4">.col-4</div>
            </div>
            <div class="col-group col-group-exp mg">
                <div class="col-4">.col-4</div>
                <div class="col-4">.col-4</div>
                <div class="col-4">.col-4</div>
            </div>
            <div class="col-group col-group-exp mg">
                <div class="col-6">.col-6</div>
                <div class="col-6">.col-6</div>
            </div>
        </div>
        <div class="mg-l"><span class="text-l">两栏布局</span></div>
        <div class="mg-l">
            {{itemData.item}}
            <div class="column-layout-wrap">
                <div class="side-wrap">
                    <div class="tree-list" tree-list="../data/tree-discount.data" ng-model="itemData.item"></div>
                </div>
                <div class="main-wrap"></div>
            </div>
        </div>
        <div class="mg-l">
            <div class="column-layout-wrap column-layout-wrap2">
                <div class="side-wrap">
                    <div class="tree-list" tree-list="../data/tree-discount.data" ng-model="itemData.item"></div>
                </div>
                <div class="main-wrap">
                    <table-list list-data="../data/table-list.data" list-params="listParams">
                        <div class="loader" ng-if="status.isLoading">
                            <div class="loader-inner pacman">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                        <div ng-if="!status.isLoading">
                            <div class="empty-wrap" ng-if="tbodyList.length==0">
                                <div class="icon"><i class="iconfont icon-empty"></i></div>
                                <div>什么也没有</div>
                            </div>
                            <div ng-if="tbodyList.length">
                                <div class="mg-m">
                                    <div class="fr">
                                        <pagination2 status="status"></pagination2>
                                    </div>
                                </div>
                                <table class="table-list">
                                    <thead>
                                    <tr>
                                        <th><input type="checkbox" class="selectAll"></th>
                                        <th>户型名称</th>
                                        <th>房屋用途</th>
                                        <th>房 型</th>
                                        <th>预售面积</th>
                                        <th>附属/赠送类型和面积</th>
                                        <th>户型图</th>
                                        <th>其他信息</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="tr in tbodyList" modal-right="920" modal-scope="this" modal-url="views/project-house-add.html?id={{::tr.id}}">
                                        <td class="select-td"><input type="checkbox" class="selectOne" value="{{tr.id}}"></td>
                                        <td>{{tr.name}}</td>
                                        <td>{{tr.col1}}</td>
                                        <td>{{tr.col2}}</td>
                                        <td>{{tr.col3}}</td>
                                        <td>{{tr.col4}}</td>
                                        <td>{{tr.col5}}</td>
                                        <td>{{tr.col6}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="mg-s">
                                    <div class="fr">
                                        <pagination status="status"></pagination>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </table-list>
                </div>
            </div>
        </div>
        <div class="mg-l"><span class="text-l">其他布局</span></div>
        <div class="mg-l">
            <div class="flex-column">
                <div class="flex-item-8">
                    <div class="tab-list-wrap" ng-controller="oneCtrl">
                        <ul class="tab-wrap" ng-init="tab=1">
                            <li class="li" ng-class="{on:tab==1}" ng-click="tab=1"><em>房间价格</em></li>
                            <li class="li" ng-class="{on:tab==2}" ng-click="tab=2"><em>普通折扣</em></li>
                            <li class="li" ng-class="{on:tab==3}" ng-click="tab=3"><em>活动折扣</em></li>
                        </ul>
                        <div class="pd-m">
                            <ul class="list-group">
                                <li class="li">
                                    <a class="name">郊区项目标签模板A</a>
                                </li>
                                <li class="li">
                                    <a class="name">郊区项目标签模板A</a>
                                </li>
                                <li class="li">
                                    <a class="name">郊区项目标签模板A</a>
                                </li>
                                <li class="li">
                                    <a class="name">郊区项目标签模板A</a>
                                </li>
                                <li class="li">
                                    <a class="name">郊区项目标签模板A</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="flex-item-4 flex-row pdl-m">
                    <div class="flex-item tab-list-wrap pd-m" ng-controller="oneCtrl">
                        <div class="mgb-m">常用业务</div>
                        <div class="mg-m">
                            <a href="#" class="btn btn-s btn-white">考试创建</a>
                            <a href="#" class="btn btn-s btn-white">成绩录入</a>
                            <a href="#" class="btn btn-s btn-white">成绩中心</a>
                            <a href="#" class="btn btn-s btn-white">我的课件</a>
                        </div>
                        <div class="mgb-m">常用流程</div>
                        <div class="mg-m">
                            <a href="#" class="btn btn-s">请假加班申请</a>
                            <a href="#" class="btn btn-s">设备维修申报</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mg-l">
            <div class="flex-column">
                <div class="flex-item-6">
                    <div class="tab-list-wrap pd-m">
                        <div class="mgb-m">代办事件</div>
                        <ul class="list-group">
                            <li class="li">
                                <a class="name">郊区项目标签模板A</a>
                            </li>
                            <li class="li">
                                <a class="name">郊区项目标签模板A</a>
                            </li>
                            <li class="li">
                                <a class="name">郊区项目标签模板A</a>
                            </li>
                            <li class="li">
                                <a class="name">郊区项目标签模板A</a>
                            </li>
                            <li class="li">
                                <a class="name">郊区项目标签模板A</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="flex-item-6 flex-row pdl-m">
                    <div class="flex-item tab-list-wrap pd-m">
                        <div class="mgb-m">
                            <div class="list-group" ng-controller="oneCtrl">
                                <div class="li">
                                    <div class="name" ng-click="show=(show==1?0:1)">北岸组团3栋</div>
                                    <div class="info animation overhide" style="height:{{show==1?'18px':'0'}}">300套 2015.10.06</div>
                                </div>
                                <div class="li">
                                    <div class="name" ng-click="show=(show==2?0:2)">北岸组团3栋</div>
                                    <div class="info animation overhide" style="height:{{show==2?'18px':'0'}}">300套 2015.10.06</div>
                                </div>
                                <div class="li">
                                    <div class="name" ng-click="show=(show==3?0:3)">北岸组团3栋</div>
                                    <div class="info animation overhide" style="height:{{show==3?'18px':'0'}}">300套 2015.10.06</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>